<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>小鹅拼拼用户中心 - 地址管理</title>
		<link rel="shortcut icon" href="img/xiaoe.ico" />

		<link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="css/personal.css" rel="stylesheet" type="text/css">
		<link href="css/addstyle.css" rel="stylesheet" type="text/css">
		<script src="AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
		<script src="AmazeUI-2.4.2/assets/js/amazeui.js"></script>
<!--		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>-->
<!--		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
	</head>

	<body>
		<div id="addressList">
			<div class="nav-table">
				<div class="long-title">
				<span class="all-goods" @click="goUserShop">
					<a href="javascript:void(0);" style="font-weight: bold; color: white">首 页</a>
				</span>
				</div>
			</div>
			<b class="line"></b>
			<div class="center">
				<div class="col-main">
					<div class="main-wrap">
						<div class="user-address">
							<!--标题 -->
							<div class="am-cf am-padding">
								<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
							</div>
							<hr/>
							<ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
								<li v-for="(address, addressIndex) in addressList" :key="addressIndex" :class="['user-addresslist', {'defaultAddr':address.isDefault == 1}]" style="margin-top: 6px;">
									<span class="new-option-r" v-show="address.isDefault === 1">
										<i class="am-icon-check-circle"></i>默认地址
									</span>
									<p class="new-tit new-p-re">
										<span class="new-txt">{{address.receiver}}</span>
										<span class="new-txt-rd2">{{address.mobile}}</span>
									</p>
									<div class="new-mu_l2a new-p-re">
										<p class="new-mu_l2cw">
											<span class="title">地址：</span>
											<span class="province">{{address.province}}</span>
											<span class="city">{{address.city}}</span>
											<span class="dist">{{address.district}}</span>
											<span class="street">{{address.detail}}</span></p>
									</div>
								</li>
							</ul>
							<div class="clear"></div>
						</div>
					</div>
					<!--底部-->
					<div class="footer ">
						<div class="footer-bd ">
							<p><em>© 2021 pinpin.com 粤ICP备13009803号-11 深圳小鹅文化传媒有限公司 版权所有</em></p>
						</div>
					</div>
				</div>

				<aside class="menu">
					<ul>
						<li class="person">
							<span style="font-weight: bold;">
								<a href="index.html">个人中心</a>
							</span>
						</li>
						<li class="person">
							<a href="#">个人资料</a>
							<ul>
								<li> <a href="userinfo.html">我的信息</a></li>
								<!-- <li> <a href="safety.html">安全设置</a></li> -->
								<li class="active"> <a href="address.html">收货地址</a></li>
							</ul>
						</li>
						<li class="person">
							<a href="#">我的交易</a>
							<ul>
								<li><a href="order.html">订单管理</a></li>
								<li> <a href="comment.html">我的评价</a></li>
							</ul>
						</li>
					</ul>
				</aside>
			</div>
		</div>
		<script type="text/javascript" src="js/app.js"></script>
		<!--	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>-->
		<script src="js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			let index = new Vue({
				el: "#addressList",
				data: {
					userIsLogin: false,
					userInfo: {},

					addressList: {},
				},
				created() {
					let me = this;
					// 通过cookie判断用户是否登录
					me.judgeUserLoginStatus();
					// 渲染地址信息
					me.renderAddressList();
				},
				methods: {
					goUserShop() {
						window.location.href = app.shopServerUrl;
					},
					renderAddressList() {
						let userInfo = this.userInfo;
						// 请求后端获得最新数据
						let serverUrl = app.serverUrl;
						axios.defaults.withCredentials = true;
						axios.post(
								serverUrl + '/address/list?userId=' + userInfo.id, {},
								{
									headers: {
										'headerUserId': userInfo.id,
										'headerUserToken': userInfo.userUniqueToken
									}
								})
							.then(res => {
								if (res.data.status === 200) {
									let addressList = res.data.data;
									console.log(addressList);
									this.addressList = addressList;

								} else if (res.data.status === 500) {
									alert(res.data.msg);
									console.log(res.data.msg);
								} else {
									alert(res.data.msg);
									console.log(res.data.msg);
								}
							});
					},
					// 通过cookie判断用户是否登录
					judgeUserLoginStatus() {
						let userCookie = app.getCookie("user");
						if (
							userCookie !== null &&
							userCookie !== undefined &&
							userCookie !== ""
						) {
							let userInfoStr = decodeURIComponent(userCookie);
							// console.log(userInfoStr);
							if (
								userInfoStr !== null &&
								userInfoStr !== undefined &&
								userInfoStr !== ""
							) {
								let userInfo = JSON.parse(userInfoStr);
								// 判断是否是一个对象
								if ( typeof(userInfo)  == "object" ) {
									this.userIsLogin = true;
									// console.log(userInfo);
									this.userInfo = userInfo;
								} else {
									this.userIsLogin = false;
									this.userInfo = {};
								}
							}
						} else {
							this.userIsLogin = false;
							this.userInfo = {};
						}
					}
				}
			});
		</script>
	</body>

</html>
